Parent for all Overlay types. The core concept with an Overlay is that of its location
, which is specified
as follows:
Connectors
- a value between 0 and 1 inclusive is a proportional value, relative to the length of the Connector's path.
- a value greater than 1 or less than 0 is an absolute value (travel along the path inscribed by the Connector)
For Connectors, the default value is 0.5
.
Endpoints
- An array of two values which are proportional to the width and height of the Endpoint.
For Endpoints, the default value is [0.5, 0.5]
.
- Source:
- overlays-api.js, line 1
Members
-
<static> Arrow
-
Draws an arrow, using four points: the head and two tail points, and a
foldback
point, which permits the tail of the arrow to be indented.- Source:
- overlays-api.js, line 3
-
<static> Diamond
-
This is a specialized instance of Arrow in which jsPlumb hardcodes
foldback
to 2, meaning the Arrow turns into a Diamond- Source:
- overlays-api.js, line 11
-
<static> Label
-
Provides a text label with which to decorate Connectors or Endpoints.
- Source:
- overlays-api.js, line 15
-
<static> PlainArrow
-
This is just a specialized instance of Arrow in which jsPlumb hardcodes
foldback
to 1, meaning the tail of the Arrow is a flat edge- Source:
- overlays-api.js, line 7
Methods
-
<static> Arrow(params, width, length, location, direction, foldback, paintStyle)
-
Parameters:
Name Type Argument Default Description params
Object Constructor parameters
width
Integer Width of the tail of the arrow
length
Integer Distance from the tail of the arrow to the head
location
Float <optional>
0.5 Where, either as a proportional value from 0 to 1 inclusive, or as an absolute value (negative values mean distance from target; positive values greater than 1 mean distance from source) the Arrow should appear on the Connector
direction
Integer Which way to point. Allowed values are 1 (the default, meaning forwards) and -1, meaning backwards
foldback
Float <optional>
0.623 How far along the axis of the arrow the tail points foldback in to.
paintStyle
Object A style object in the form used for paintStyle values for Endpoints and Connectors.
- Source:
- overlays-api.js, line 5
-
<static> Diamond(params, width, length, location, direction, paintStyle)
-
Parameters:
Name Type Argument Default Description params
Object Constructor parameters
width
Integer Width of the diamond.
length
Integer Length of the diamond.
location
Float <optional>
0.5 Where, either as a proportional value from 0 to 1 inclusive, or as an absolute value (negative values mean distance from target; positive values greater than 1 mean distance from source) the Diamond should appear on the Connector
direction
Integer Which way to point. Allowed values are 1 (the default, meaning forwards) and -1, meaning backwards
paintStyle
Object A style object in the form used for paintStyle values for Endpoints and Connectors.
- Source:
- overlays-api.js, line 13
-
<static> Label(params, label, cssClass, location)
-
Parameters:
Name Type Argument Default Description params
Object Constructor parameters
label
String | Function The text to display. You can provide a function here instead of plain text: it is passed the component as an argument, and it should return a String.
cssClass
String <optional>
Optional css class to use for the Label. This is now preferred over using the
labelStyle
parameter.location
Float <optional>
0.5 Where, either as a proportional value from 0 to 1 inclusive, or as an absolute value (negative values mean distance from target; positive values greater than 1 mean distance from source) the Label should appear on the Connector
- Source:
- overlays-api.js, line 17
-
<static> PlainArrow(params, width, length, location, direction, paintStyle)
-
Parameters:
Name Type Argument Default Description params
Object Constructor parameters
width
Integer Width of the tail of the arrow
length
Integer Distance from the tail of the arrow to the head
location
Float <optional>
0.5 Where, either as a proportional value from 0 to 1 inclusive, or as an absolute value (negative values mean distance from target; positive values greater than 1 mean distance from source) the PlainArrow should appear on the Connector
direction
Integer Which way to point. Allowed values are 1 (the default, meaning forwards) and -1, meaning backwards
paintStyle
Object A style object in the form used for paintStyle values for Endpoints and Connectors.
- Source:
- overlays-api.js, line 9